.box-intro {
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 100%; }

@-webkit-keyframes v {
  0% {
    opacity: 0; }
  to {
    opacity: 1; } }

@-moz-keyframes v {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes v {
  0% {
    opacity: 0; }
  to {
    opacity: 1; } }
  .box-intro.box-intro-orange {	  
	/*background-color: #f68a73; } 
    .box-intro.box-intro-orange .box-intro-inner {
      background: -webkit-linear-gradient(#f68a73, #ffdf8f);
      background: -o-linear-gradient(#f68a73, #ffdf8f);
      background: -webkit-gradient(linear, left top, left bottom, from(#f68a73), to(#ffdf8f));
      background: linear-gradient(#cba093, #fad3a7);
      height: 100%;
      width: 100%;
      display: table;
      min-height: 100%; }*/	  
	  
	 background-color: #e1e7f3; }
    .box-intro.box-intro-orange .box-intro-inner {
      background: -webkit-linear-gradient(#e1e7f3, #dde6eb);
      background: -o-linear-gradient(#e1e7f3, #ffdf8f);
      background: -webkit-gradient(linear, left top, left bottom, from(#e1e7f3), to(#dde6eb));
      background: linear-gradient(#e1e7f3, #dde6eb);
	  background-image:url(../../assets61/img/bg-main01.jpg); 
      height: 100%;
      width: 100%;
      display: table;
      min-height: 100%; }
	  
	  
	.box-intro.box-intro-blue {
    background-color: #57aebf; }
    .box-intro.box-intro-blue .box-intro-inner {
      background: -webkit-linear-gradient(#b99e83, #edddc3);
      background: -o-linear-gradient(#b99e83, #edddc3);
      background: -webkit-gradient(linear, left top, left bottom, from(#b99e83), to(#edddc3));
      background: linear-gradient(#57aebf, #b9dabb);
      height: 100%;
      width: 100%;
      display: table;
      min-height: 100%; }
	  
	  
	  
	  
  .box-intro.box-intro-pink {
    background-color: #ff7684; }
    .box-intro.box-intro-pink .box-intro-inner {
      background: -webkit-linear-gradient(#ff7684, #ffe2c9);
      background: -o-linear-gradient(#ff7684, #ffe2c9);
      background: -webkit-gradient(linear, left top, left bottom, from(#ff7684), to(#ffe2c9));
      background: linear-gradient(#75b2b3, #bcebe5);
      height: 100%;
      width: 100%;
      display: table;
      min-height: 100%; }
	  
	  
	  
	  
	  
  .box-intro .box-intro-fade {
    opacity: 0;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  .box-intro .box-intro-wrapper {
    max-height: 100%;
    height: 100%;
    width: 50%;
    padding: 1.5% 0 1.5% 0;
    display: table-cell;
    vertical-align: top;
    display: block;
    float: left;
    position: relative; }
    .box-intro .box-intro-wrapper.box-custom-left {
      display: table;
      vertical-align: middle; }
    .box-intro .box-intro-wrapper.box-intro-wrapper-news {
      padding-top: 1%;
      padding-bottom: 1%; }
    .box-intro .box-intro-wrapper:before, .box-intro .box-intro-wrapper:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0; }
  .box-intro .box-intro-left {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    min-width: 610px; }
    .box-intro .box-intro-left .wrapper-left {
      margin: 0px 0px; }
  .box-intro .intro-header {
    padding-left: 10px; }
    .box-intro .intro-header .intro-title {
      color: #fff;
      font-size: 1.8em;
      line-height: 1.3;
      margin-bottom: 10px;
      font-weight: 700;
      margin-top: 0;
      overflow: hidden; 
	  text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
    .box-intro .intro-header .intro-sub-title {
      color: #f0f0f0;
	   margin: 1.7%;
      font-size: 0.9em;
      line-height: 1.8;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: 400;
      font-family: 'dtac2013_rg-webfont';
	  text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
      .box-intro .intro-header .intro-sub-title.sub-title {
        font-size: 13px;
        line-height: 1.4;
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
  .box-intro .intro-content {
    margin-top: 10px; }
    .box-intro .intro-content .intro-grad {
      width: 285px;
      float: left;
      height: 120px;
      text-align: center;
      border-radius: 2px;
      margin: 10px;
      -webkit-box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      z-index: 10;
      display: table; }
      .box-intro .intro-content .intro-grad a {
        display: table-cell;
        vertical-align: middle;
        padding-bottom: 7%;
        background: #fff; 
        height: 100%;
        -moz-animation-name: v;
        -webkit-animation-name: v;
        animation-name: v;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -moz-animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -moz-animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        opacity: 0;
        position: relative;
        z-index: 10; }
      .box-intro .intro-content .intro-grad.box-grad-1 a {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s; }
      .box-intro .intro-content .intro-grad.box-grad-2 a {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s; }
      .box-intro .intro-content .intro-grad.box-grad-3 a {
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        animation-delay: 0.6s; }
      .box-intro .intro-content .intro-grad.box-grad-4 a {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s; }
	  .box-intro .intro-content .intro-grad.box-grad-5 a {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s; }
      .box-intro .intro-content .intro-grad a:before {
        content: "";
        position: absolute;
        background: #84b5fe;
        top: 50%;
        left: 50%;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        width: 5%;
        padding-top: 5%;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%) scale(0);
        -moz-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        -webkit-transition: opacity .3s ease-out,-webkit-transform .3s ease-out;
        -o-transition: opacity .3s ease-out,transform .3s ease-out;
        transition: opacity .3s ease-out,transform .3s ease-out;
        transition: opacity .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out;
        transition: opacity .3s ease-out,-webkit-transform .3s ease-out;
        transition: opacity .3s ease-out,-moz-transform .3s ease-out;
        -o-transition: transform .3s ease-out,opacity .3s ease-out;
        transition: transform .3s ease-out,opacity .3s ease-out;
        transition: transform .3s ease-out,opacity .3s ease-out,-webkit-transform .3s ease-out;
        transition: transform .3s ease-out,opacity .3s ease-out,-moz-transform .3s ease-out; }
      .box-intro .intro-content .intro-grad:hover a:before {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(32);
        -moz-transform: translate(-50%, -50%) scale(32);
        -ms-transform: translate(-50%, -50%) scale(32);
        transform: translate(-50%, -50%) scale(32); }
      .box-intro .intro-content .intro-grad:hover .intro-desc {
        position: absolute;
        top: 35%;
        width: 80%;
        padding: 0;
        left: 10%;
        color: #fff; }
      .box-intro .intro-content .intro-grad a {
        text-decoration: none !important; }
    .box-intro .intro-content .intro-img img {
      width: 60px; }
    .box-intro .intro-content .intro-desc {
      padding: 0 15px;
      font-size: 15px;
      line-height: 1.5;
      color: #222;
      text-decoration: none;
	  font-family: 'dtac2013_bl-webfont', 'dtac2013_lt-webfont', 'dtac2013_rg-webfont';}
    .box-intro .intro-content:before, .box-intro .intro-content:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0; }
  .box-intro .intro-bg-img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    left: 0;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in 1;
    animation-timing-function: ease-in 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s; }
  .box-intro .intro-header-right .nav-tab-mode {
    list-style: none;
    -webkit-margin-before: 0;
    margin-block-start: 0;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0; }
    .box-intro .intro-header-right .nav-tab-mode li {
      display: inline-block !important;
      margin: 0 5px 7px 5px;
      padding: 0 0 3px 0; }
      .box-intro .intro-header-right .nav-tab-mode li a {
        cursor: pointer;
        text-decoration: none;
        padding: 0 10px;
        color: #f0f0f0;
        font-size: 1.2em; 
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
        .box-intro .intro-header-right .nav-tab-mode li a i {
          margin-right: 5px; }
    .box-intro .intro-header-right .nav-tab-mode .mode-tab-active {
      border-bottom: 3px solid #488bf8; }
      .box-intro .intro-header-right .nav-tab-mode .mode-tab-active a {
        color: #fff; 
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
  .box-intro .box-intro-right {
    padding-right: 3%;
    margin-left: -1%; }
  .box-intro .intro-content-right h1, .box-intro .intro-content-right h2, .box-intro .intro-content-right h3, .box-intro .intro-content-right h4, .box-intro .intro-content-right h5, .box-intro .intro-content-right h6 {
    margin: 0;
    color: #fff; }
  .box-intro .intro-content-right a {
    text-decoration: none; }
  .box-intro .intro-content-right h1 {
    font-size: 2.6em;
    line-height: 1.1; }
  .box-intro .intro-content-right h2 {
    font-size: 1.8em;
    line-height: 1.1; }
  .box-intro .intro-content-right h3 {
    font-size: 1.1em;
    line-height: 1.6; }
  .box-intro .intro-content-right h4 {
    font-size: 0.9em;
    line-height: 1.6; }
  .box-intro .intro-content-right h5 {
    font-size: 0.7em;
    line-height: 1.5; }
  .box-intro .intro-content-right img {
    vertical-align: middle;
    max-width: 100%;
    border-style: none; }
  .box-intro .intro-content-right ._pt7px {
    padding-top: 7px; }
  .box-intro .intro-content-right ._mt2px {
    margin-top: 2px; }
  .box-intro .intro-content-right ._mt7px {
    margin-top: 7px; }
  .box-intro .intro-content-right ._mt15px {
    margin-top: 15px !important; }
  .box-intro .intro-content-right ._mb15px {
    margin-bottom: 15px !important; }
  .box-intro .intro-content-right .txt-blue {
    color: #18499a; }
  .box-intro .intro-content-right .w-300-center {
    max-width: 300px;
    margin: 0 auto; }
  .box-intro .intro-content-right .content-news-top:before, .box-intro .intro-content-right .content-news-top:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .box-intro .intro-content-right .content-card-column {
    width: 48%;
    float: left;
    margin: 1%;
    min-height: 300px;
    height: 35vh !important;
    position: relative;
    height: 100%;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    display: table;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
    .box-intro .intro-content-right .content-card-column:after {
      padding-top: 60%;
      display: block;
      content: ''; }
    .box-intro .intro-content-right .content-card-column.content-card-blue {
      background: #84b5fe;
      -webkit-transition-duration: .5s;
      -o-transition-duration: .5s;
      transition-duration: .5s;
      -webkit-transition-property: background;
      -o-transition-property: background;
      transition-property: background;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      color: #fff; }
      .box-intro .intro-content-right .content-card-column.content-card-blue:hover {
        background-color: #5592fc; }
    .box-intro .intro-content-right .content-card-column.content-card-ocean {
      color: #0a4867;
      -webkit-transition-duration: .5s;
      -o-transition-duration: .5s;
      transition-duration: .5s;
      -webkit-transition-property: background;
      -o-transition-property: background;
      transition-property: background;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      background-color: #eaf5fb; }
      .box-intro .intro-content-right .content-card-column.content-card-ocean:hover {
        background-color: #d2dce1; }
    .box-intro .intro-content-right .content-card-column.content-card-pink {
      background-image: -webkit-gradient(linear, left top, right top, from(#ffe6e2), to(#ffdae1));
      background-image: -webkit-linear-gradient(left, #ffe6e2, #ffdae1);
      background-image: -o-linear-gradient(left, #ffe6e2, #ffdae1);
      background-image: linear-gradient(90deg, #ffe6e2, #ffdae1); }
    .box-intro .intro-content-right .content-card-column.card-column-img:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 0;
      -webkit-transition: opacity .5s ease-in-out;
      -o-transition: opacity .5s ease-in-out;
      transition: opacity .5s ease-in-out;
      z-index: 1; }
    .box-intro .intro-content-right .content-card-column.card-column-img:hover:before {
      opacity: 1; }
    .box-intro .intro-content-right .content-card-column .news-card-img {
      width: 100%;
      text-align: center;
      overflow: hidden;
      height: 40%;
      position: relative; }
      .box-intro .intro-content-right .content-card-column .news-card-img img {
        top: -15%;
        /*position: relative;*/ }
    .box-intro .intro-content-right .content-card-column .card-column-img-text {
      height: 60%; }
  .box-intro .intro-content-right .content-card-wrapper {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    opacity: 0;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s; }
    .box-intro .intro-content-right .content-card-wrapper.card-img {
      vertical-align: top; }
    .box-intro .intro-content-right .content-card-wrapper .txt-header-content {
      font-size: 1em; }
    .box-intro .intro-content-right .content-card-wrapper small {
      font-size: 0.9em; }
    .box-intro .intro-content-right .content-card-wrapper .txt-focus {
      font-size: 1.2em; }
    .box-intro .intro-content-right .content-card-wrapper.card-img h3 {
      color: #0a4867; }
    .box-intro .intro-content-right .content-card-wrapper.card-img h5 {
      color: #0a4867; }
    .box-intro .intro-content-right .content-card-wrapper .news-card-img-video {
      cursor: pointer;
      position: relative;
      display: table;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0.5;
        -webkit-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        z-index: 5; }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video:hover:before {
        opacity: 1; }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video:hover .icon-play-vdo {
        -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25); }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img {
        z-index: 6;
        display: table-cell;
        vertical-align: middle;
        position: relative; }
        .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img p {
          font-size: 1.3em;
          margin: 0;
          color: #fff;
          line-height: 1.4; }
        .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img .icon-play-vdo {
          margin: 10px auto 30px;
          -webkit-transition: all .2s ease-in-out;
          -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #fff; }
          .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img .icon-play-vdo i {
            font-size: 24px;
            color: #488bf8;
            line-height: 50px;
            padding-left: 8px; }
  .box-intro .intro-content-right .button-card-main {
    background-color: #fff;
    padding: 4px 10px;
    font-size: 0.7em;
    border: 1px solid;
    position: relative;
    border-radius: 3px;
    z-index: 7;
    cursor: pointer; }
    .box-intro .intro-content-right .button-card-main.button-blue {
      color: #488bf8;
      border-color: #488bf8; }
    .box-intro .intro-content-right .button-card-main.button-ocean {
      color: #eaf5fb;
      border-color: #eaf5fb; }
    .box-intro .intro-content-right .button-card-main.button-pink {
      color: #ff567d;
      border-color: #ff567d;
      background-color: #fafafa; }
  .box-intro .intro-content-right .content-news-bottom {
    position: relative; }
    .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide {
      background: rgba(255, 255, 255, 0.5);
      text-align: center;
      margin: 1%;
      padding: 0 0 3% 0;
      -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide {
        width: 98%;
        padding-bottom: 0 !important; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img {
          height: 100% !important; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img img {
            top: 0 !important; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img:before {
            position: initial;
            opacity: 0;
            z-index: 0; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img {
            position: absolute;
            z-index: 3;
            top: 5%;
            padding-left: 7%;
            text-align: left;
            width: 70%;
            color: #fff; }
            .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img p {
              margin: 0;
              text-shadow: 2px 2px 10px rgba(150, 150, 150, 0.8);
              line-height: 1.6; }
            .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img h1 {
              font-size: 1.5em;
              line-height: 1.3;
              text-shadow: 2px 2px 10px rgba(150, 150, 150, 0.8); }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .slick-slide {
          margin: 0 !important; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .slick-dotted.slick-slider {
          margin-bottom: 0; }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .title-promotion-slide {
        color: #000;
        padding: 15px 0 10px 0; }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner {
        opacity: 0;
        -webkit-animation-name: v;
        animation-name: v;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide a {
          display: table;
          height: 30vh; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-arrow {
          display: block;
          z-index: 1;
          background: rgba(255, 255, 255, 0.8);
          height: 97%; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-prev {
          left: 0;
          padding: 0 35px 0 9px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-prev:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f104";
            color: #4b4f56;
            line-height: 30px;
			margin-left: -2px;
            -webkit-text-stroke: 1px white; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-next {
          right: 0;
          padding: 0 30px 0 13px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-next:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f105";
            color: #4b4f56;
            line-height: 30px;
			margin-left: -2px;
            -webkit-text-stroke: 1px white; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .wrapper-slide {
          display: table;
          height: 30vh; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-arrow {
          display: none; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev {
          left: 0; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev:before {
            content: " "; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next {
          right: 0; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next:before {
            content: " "; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots {
          bottom: 15px;
          padding-left: 30px;
          text-align: left; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li:hover {
            color: #fff; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li button:before {
            opacity: .5; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li.slick-active button:before, .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li.slick-active button:hover {
            opacity: 1;
            color: #fff; }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-text {
      background: #fff;
      position: relative;
      display: table-cell;
      vertical-align: top;
      -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-text:hover .card-slide-img:before {
        opacity: 1; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img {
        width: 100%;
        text-align: center;
        overflow: hidden;
        height: 50%;
        position: relative; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.3);
          opacity: 0.7;
          -webkit-transition: opacity .2s ease-in-out;
          -o-transition: opacity .2s ease-in-out;
          transition: opacity .2s ease-in-out;
          z-index: 5; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img img {
          top: -15%;
          position: relative;
          width: 100%; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img h2 {
          position: absolute;
          z-index: 6;
          top: 30%;
          width: 100%;
          color: #fff; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text {
        padding: 10px 0 0 0; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text p {
          font-size: 0.7em;
          text-align: center;
          line-height: 1.3;
          min-height: 35px;
          color: #686868;
          padding: 5px 15px 5px 15px;
          margin: 0; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text .txt-red {
          font-size: 0.7em;
          text-align: center;
          color: #e12d2d;
          position: absolute;
          bottom: 7%;
          width: 100%; }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus {
      background: #fff;
      position: relative;
      display: table-cell;
      vertical-align: middle;
      -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        -webkit-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        z-index: 5; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus:hover:before {
        opacity: 1; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus .card-slide-img {
        width: 75%;
        margin: 0 auto; }
    .box-intro .intro-content-right .content-news-bottom .slick-slide {
      margin: 5px 7px 5px 7px;
      -webkit-animation-name: v;
      animation-name: v;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out; }
    .box-intro .intro-content-right .content-news-bottom .slick-slide {
      -webkit-transition: all ease-in-out .3s;
      -o-transition: all ease-in-out .3s;
      transition: all ease-in-out .3s; }
    .box-intro .intro-content-right .content-news-bottom .slick-active {
      opacity: .5; }
    .box-intro .intro-content-right .content-news-bottom .slick-current {
      opacity: 1; }
    .box-intro .intro-content-right .content-news-bottom .flip-card {
      width: 100%;
      height: 100%;
      position: relative;
      cursor: pointer;
      -webkit-transition: -webkit-transform 1s;
      -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
      transition: -webkit-transform 1s;
      -o-transition: transform 1s;
      transition: transform 1s;
      transition: transform 1s, -webkit-transform 1s;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: 50% 50%; }
    .box-intro .intro-content-right .content-news-bottom .flip-card .flip-card-inner {
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 10;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden; }
    .box-intro .intro-content-right .content-news-bottom .flip-card .front-card {
      background: #fff; }
    .box-intro .intro-content-right .content-news-bottom .flip-card .back-card {
      background: #fff;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }
      .box-intro .intro-content-right .content-news-bottom .flip-card .back-card .msg-top {
        top: 10%;
        left: 5%;
        position: absolute;
        display: block;
        width: 90%;
        font-size: 1em;
        text-align: center;
        border: 2px dashed #f57070;
        color: #f57070; 
		 font-family: 'dtac2013_bl-webfont', 'dtac2013_lt-webfont', 'dtac2013_rg-webfont';}
      .box-intro .intro-content-right .content-news-bottom .flip-card .back-card .msg-bottom {
        bottom: 15%;
        position: absolute;
        display: block;
        width: 100%;
        padding: 1% 3%;
        font-size: 0.6em;
        color: #222;
        line-height: 1.3; }
    .box-intro .intro-content-right .content-news-bottom .flip-card.flipped {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }
	  
.box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-arrow {
          display: block;
          z-index: 1; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev {
          left: 0;
          padding: 0 35px 0 10px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f104";
            color: #4b4f56;
            line-height: 30px;
            -webkit-text-stroke: 1px white; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next {
          right: 0;
          padding: 0 50px 0 15px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f105";
            color: #4b4f56;
            line-height: 30px;
			margin-left: -2px;
            -webkit-text-stroke: 1px white; }

@media (max-width: 1920px) and (min-width: 1280px) {
  .box-intro {
    font-size: calc(16px + (16 - 12)*((100vw - 1280px)/(1920 - 1280))) !important; }
	 
	 }

@media (max-width: 1180px) {
  .box-intro .box-intro-wrapper.box-custom-left {
    display: block !important;
    vertical-align: top; 
	background-image:url(../../assets61/img/bg-mahidol-tablet.jpg); }
	 }

@media (max-width: 1080px) {
	
  .box-intro .box-intro-wrapper {
    width: 100%;
    float: none;
    display: block;
    height: auto; }
    .box-intro .box-intro-wrapper.box-intro-wrapper-news {
      padding-bottom: 5%; }
    .box-intro .box-intro-wrapper .intro-bg-img {
      display: none !important; }
  .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus .card-slide-img {
    width: 50%; }
  .box-intro .box-intro-left {
    max-width: 550px;
    width: 90%;
    margin: 20px auto;
    min-width: initial; }
    .box-intro .box-intro-left .wrapper-left {
      margin: 0; }
  .box-intro .intro-header .intro-sub-title.sub-title {
    line-height: 1.7; }
  .box-intro .intro-content .intro-grad {
    width: 45%;
    margin: 2.5%; }
  .box-intro .box-intro-right {
    padding-right: 0;
    margin-left: 0;
    width: 100%;
    margin: 0 auto; }
  .box-intro .nav-tab-mode {
    text-align: center !important; }
    .box-intro .nav-tab-mode a {
      font-size: 0.9em; }
	
	.box-intro .intro-content .intro-grad a {
        display: table-cell;
        vertical-align: middle;
        padding-bottom: 7%;
        background: #5392f9; 
		color:#fff;
        height: 100%;
        -moz-animation-name: v;
        -webkit-animation-name: v;
        animation-name: v;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -moz-animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -moz-animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        opacity: 0;
        position: relative;
        z-index: 10; }
		.box-intro .intro-content .intro-desc {
      padding: 0 15px;
      font-size: 15px;
      line-height: 1.5;
      color: #fff;
      text-decoration: none; }
	  }

@media (max-width: 600px) {
	
  .box-intro .box-intro-right {
    width: 90%; }
  .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img img {
    top: 0; }
  .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img h2 {
    font-size: 1.3em; }
  .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text {
    padding: 0; } }

@media (max-width: 500px) {
	
  .decor-headline01 {font-size: 1.2rem; color: #00a4e4; line-height: 28px; padding:15px;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent,transparent),url(../../assets61/img/text-gradient-bg.png) 100% no-repeat;
    background-size: auto auto, auto auto;
    background-clip: border-box, border-box;
background: -o-linear-gradient(transparent,transparent);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-clip: text;
display: inline-block;
}
   .g-my-10 { font-size:1.0rem;}
.box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img p { font-size:0.6rem;}
  .box-intro .box-intro-right {
    width: 100%; }
  .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img {
    height: 70%; }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img:before {
      background-color: rgba(0, 0, 0, 0.3); }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img h2 {
      font-size: 1.4em;
      top: 30%; }
  .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text {
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 5; }
  .box-intro .intro-content-right .content-news-top {
    margin: 10px 0 15px 0 !important; }
  .box-intro .intro-content-right .content-card-column {
    width: 100%;
    margin: 0; }
    .box-intro .intro-content-right .content-card-column .news-card-img {
      height: 50%; }
    .box-intro .intro-content-right .content-card-column .card-column-img-text {
      height: 50%; }
    .box-intro .intro-content-right .content-card-column .content-card-wrapper.card-img {
      vertical-align: top; }
      .box-intro .intro-content-right .content-card-column .content-card-wrapper.card-img .news-card-img {
        height: auto; }
      .box-intro .intro-content-right .content-card-column .content-card-wrapper.card-img .news-footer {
        margin-bottom: 10px; }
  .box-intro .intro-content-right .slick-slide {
    margin: 0 !important; }
  .box-intro .intro-content-right .slick-prev, .box-intro .intro-content-right .slick-next {
    background: transparent !important;
    padding: 0 !important; }
  .box-intro .intro-content-right .slick-next {
    right: 5% !important; }
  .box-intro .intro-content-right .slick-prev {
    left: 3% !important; }
  .box-intro .intro-content-right .content-news-bottom {
    margin: 0; }
    .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide {
      padding: 0;
      margin: 0; }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img {
        top: 5%;
        padding-left: 13%;
        padding-right: 8%;
        width: 100%; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img h1 {
          font-size: 0.7rem;/* margin-top:-35px;*/
		  }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text p {
      margin: 8px 0 18px 0; }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text .txt-red {
      bottom: 10%; }
    .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-inner {
      max-width: 100%; }
  .box-intro .intro-content-right .card-footer-btn button.button-card-main {
    margin-bottom: 10px !important; } }

@media (max-width: 420px) {
	
  .box-intro .intro-header .intro-title {
    margin-bottom: 4px; }
  .box-intro .intro-header .intro-sub-title {
    margin-bottom: 10px; }
  .box-intro .intro-content .intro-desc {
    padding: 0;
    font-size: 12px;
    width: 90%;
    margin: auto; } }











/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
.h4, h4 {
    font-size: 1.0rem;}
	.h5, h5 {
    font-size: 1.0rem;
}
}
/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.h4, h4 {
    font-size: 1.3rem;}
.material-icons {
    position: relative;
    top: .31286rem;}
	
  .box-intro .box-intro-fade {
    opacity: 0;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  .box-intro .box-intro-wrapper {
    max-height: 100%;
    height: 100%;
    width: 50%;
    padding: 1.5% 0 1.5% 0;
    display: table-cell;
    vertical-align: top;
    display: block;
    float: left;
    position: relative; }
    .box-intro .box-intro-wrapper.box-custom-left {
      display: table;
      vertical-align: middle; }
    .box-intro .box-intro-wrapper.box-intro-wrapper-news {
      padding-top: 1%;
      padding-bottom: 1%; }
    .box-intro .box-intro-wrapper:before, .box-intro .box-intro-wrapper:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0; }
  .box-intro .box-intro-left {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    min-width: 610px; }
    .box-intro .box-intro-left .wrapper-left {
      margin: 0px 0px; }
  .box-intro .intro-header {
    padding-left: 10px; }
    .box-intro .intro-header .intro-title {
      color: #fff;
      font-size: 1.8em;
      line-height: 1.3;
      margin-bottom: 10px;
      font-weight: 700;
      margin-top: 0;
      overflow: hidden; 
	  text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
    .box-intro .intro-header .intro-sub-title {
      color: #f0f0f0;
	   margin: 1.7%;
      font-size: 0.9em;
      line-height: 1.8;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: 400;
      font-family: 'dtac2013_rg-webfont';
	  text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
      .box-intro .intro-header .intro-sub-title.sub-title {
        font-size: 13px;
        line-height: 1.4;
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
  .box-intro .intro-content {
    margin-top: 10px; }
    .box-intro .intro-content .intro-grad {
      width: 220px;
      float: left;
      height: 120px;
      text-align: center;
      border-radius: 2px;
      margin: 10px;
      -webkit-box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      z-index: 10;
      display: table; }
     .box-intro .intro-content .intro-grad a {
        display: table-cell;
        vertical-align: middle;
        padding-bottom: 7%;
        background: #5392f9; 
		color:#fff;
        height: 100%;
        -moz-animation-name: v;
        -webkit-animation-name: v;
        animation-name: v;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -moz-animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -moz-animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        opacity: 0;
        position: relative;
        z-index: 10; }
		.box-intro .intro-content .intro-desc {
      padding: 0 15px;
      font-size: 15px;
      line-height: 1.5;
      color: #fff;
      text-decoration: none; }
      .box-intro .intro-content .intro-grad.box-grad-1 a {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s; }
      .box-intro .intro-content .intro-grad.box-grad-2 a {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s; }
      .box-intro .intro-content .intro-grad.box-grad-3 a {
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        animation-delay: 0.6s; }
      .box-intro .intro-content .intro-grad.box-grad-4 a {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s; }
	 .box-intro .intro-content .intro-grad.box-grad-5 a {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        animation-delay: 0.8s; }
      .box-intro .intro-content .intro-grad a:before {
        content: "";
        position: absolute;
        background: #84b5fe;
        top: 50%;
        left: 50%;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        width: 5%;
        padding-top: 5%;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%) scale(0);
        -moz-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        -webkit-transition: opacity .3s ease-out,-webkit-transform .3s ease-out;
        -o-transition: opacity .3s ease-out,transform .3s ease-out;
        transition: opacity .3s ease-out,transform .3s ease-out;
        transition: opacity .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out;
        transition: opacity .3s ease-out,-webkit-transform .3s ease-out;
        transition: opacity .3s ease-out,-moz-transform .3s ease-out;
        -o-transition: transform .3s ease-out,opacity .3s ease-out;
        transition: transform .3s ease-out,opacity .3s ease-out;
        transition: transform .3s ease-out,opacity .3s ease-out,-webkit-transform .3s ease-out;
        transition: transform .3s ease-out,opacity .3s ease-out,-moz-transform .3s ease-out; }
      .box-intro .intro-content .intro-grad:hover a:before {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(32);
        -moz-transform: translate(-50%, -50%) scale(32);
        -ms-transform: translate(-50%, -50%) scale(32);
        transform: translate(-50%, -50%) scale(32); }
      .box-intro .intro-content .intro-grad:hover .intro-desc {
        position: absolute;
        top: 35%;
        width: 80%;
        padding: 0;
        left: 10%;
        color: #fff; }
      .box-intro .intro-content .intro-grad a {
        text-decoration: none !important; }
    .box-intro .intro-content .intro-img img {
      width: 60px; }
    .box-intro .intro-content .intro-desc {
      padding: 0 15px;
      font-size: 15px;
      line-height: 1.5;
      color: #fff;
      text-decoration: none;
	  font-family: 'dtac2013_bl-webfont', 'dtac2013_lt-webfont', 'dtac2013_rg-webfont';}
    .box-intro .intro-content:before, .box-intro .intro-content:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0; }
  .box-intro .intro-bg-img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    left: 0;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in 1;
    animation-timing-function: ease-in 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s; }
  .box-intro .intro-header-right .nav-tab-mode {
    list-style: none;
    -webkit-margin-before: 0;
    margin-block-start: 0;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0; }
    .box-intro .intro-header-right .nav-tab-mode li {
      display: inline-block !important;
      margin: 0 5px 7px 5px;
      padding: 0 0 3px 0; }
      .box-intro .intro-header-right .nav-tab-mode li a {
        cursor: pointer;
        text-decoration: none;
        padding: 0 10px;
        color: #f0f0f0;
        font-size: 1.2em; 
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
        .box-intro .intro-header-right .nav-tab-mode li a i {
          margin-right: 5px; }
    .box-intro .intro-header-right .nav-tab-mode .mode-tab-active {
      border-bottom: 3px solid #488bf8; }
      .box-intro .intro-header-right .nav-tab-mode .mode-tab-active a {
        color: #fff; 
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
  .box-intro .box-intro-right {
    padding-right: 3%;
    margin-left: -1%; }
  .box-intro .intro-content-right h1, .box-intro .intro-content-right h2, .box-intro .intro-content-right h3, .box-intro .intro-content-right h4, .box-intro .intro-content-right h5, .box-intro .intro-content-right h6 {
    margin: 0;
    color: #fff; }
  .box-intro .intro-content-right a {
    text-decoration: none; }
  .box-intro .intro-content-right h1 {
    font-size: 2.6em;
    line-height: 1.1; }
  .box-intro .intro-content-right h2 {
    font-size: 1.8em;
    line-height: 1.1; }
  .box-intro .intro-content-right h3 {
    font-size: 1.0em;
    line-height: 1.2; }
  .box-intro .intro-content-right h4 {
    font-size: 0.9em;
    line-height: 1.6; }
  .box-intro .intro-content-right h5 {
    font-size: 0.7em;
    line-height: 1.5; }
  .box-intro .intro-content-right img {
    vertical-align: middle;
    max-width: 100%;
    border-style: none; }
  .box-intro .intro-content-right ._pt7px {
    padding-top: 7px; }
  .box-intro .intro-content-right ._mt2px {
    margin-top: 2px; }
  .box-intro .intro-content-right ._mt7px {
    margin-top: 7px; }
  .box-intro .intro-content-right ._mt15px {
    margin-top: 15px !important; }
  .box-intro .intro-content-right ._mb15px {
    margin-bottom: 15px !important; }
  .box-intro .intro-content-right .txt-blue {
    color: #18499a; }
  .box-intro .intro-content-right .w-300-center {
    max-width: 300px;
    margin: 0 auto; }
  .box-intro .intro-content-right .content-news-top:before, .box-intro .intro-content-right .content-news-top:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .box-intro .intro-content-right .content-card-column {
    width: 48%;
    float: left;
    margin: 1%;
    min-height: 200px;
    height: 25vh !important;
    position: relative;
    height: 100%;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
    display: table;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
    .box-intro .intro-content-right .content-card-column:after {
      padding-top: 60%;
      display: block;
      content: ''; }
    .box-intro .intro-content-right .content-card-column.content-card-blue {
      background: #84b5fe;
      -webkit-transition-duration: .5s;
      -o-transition-duration: .5s;
      transition-duration: .5s;
      -webkit-transition-property: background;
      -o-transition-property: background;
      transition-property: background;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      color: #fff; }
      .box-intro .intro-content-right .content-card-column.content-card-blue:hover {
        background-color: #5592fc; }
    .box-intro .intro-content-right .content-card-column.content-card-ocean {
      color: #0a4867;
      -webkit-transition-duration: .5s;
      -o-transition-duration: .5s;
      transition-duration: .5s;
      -webkit-transition-property: background;
      -o-transition-property: background;
      transition-property: background;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      background-color: #eaf5fb; }
      .box-intro .intro-content-right .content-card-column.content-card-ocean:hover {
        background-color: #d2dce1; }
    .box-intro .intro-content-right .content-card-column.content-card-pink {
      background-image: -webkit-gradient(linear, left top, right top, from(#ffe6e2), to(#ffdae1));
      background-image: -webkit-linear-gradient(left, #ffe6e2, #ffdae1);
      background-image: -o-linear-gradient(left, #ffe6e2, #ffdae1);
      background-image: linear-gradient(90deg, #ffe6e2, #ffdae1); }
    .box-intro .intro-content-right .content-card-column.card-column-img:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 0;
      -webkit-transition: opacity .5s ease-in-out;
      -o-transition: opacity .5s ease-in-out;
      transition: opacity .5s ease-in-out;
      z-index: 1; }
    .box-intro .intro-content-right .content-card-column.card-column-img:hover:before {
      opacity: 1; }
    .box-intro .intro-content-right .content-card-column .news-card-img {
      width: 100%;
      text-align: center;
      overflow: hidden;
      height: 40%;
      position: relative; }
      .box-intro .intro-content-right .content-card-column .news-card-img img {
        top: -15%;
        position: relative; }
    .box-intro .intro-content-right .content-card-column .card-column-img-text {
      height: 60%; }
  .box-intro .intro-content-right .content-card-wrapper {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    opacity: 0;
    -webkit-animation-name: v;
    animation-name: v;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s; }
    .box-intro .intro-content-right .content-card-wrapper.card-img {
      vertical-align: top; }
    .box-intro .intro-content-right .content-card-wrapper .txt-header-content {
      font-size: 1em; }
    .box-intro .intro-content-right .content-card-wrapper small {
      font-size: 0.9em; }
    .box-intro .intro-content-right .content-card-wrapper .txt-focus {
      font-size: 1.2em; }
    .box-intro .intro-content-right .content-card-wrapper.card-img h3 {
      color: #0a4867; }
    .box-intro .intro-content-right .content-card-wrapper.card-img h5 {
      color: #0a4867; }
    .box-intro .intro-content-right .content-card-wrapper .news-card-img-video {
      cursor: pointer;
      position: relative;
      display: table;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0.5;
        -webkit-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        z-index: 5; }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video:hover:before {
        opacity: 1; }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video:hover .icon-play-vdo {
        -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25); }
      .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img {
        z-index: 6;
        display: table-cell;
        vertical-align: middle;
        position: relative; }
        .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img p {
          font-size: 1.3em;
          margin: 0;
          color: #fff;
          line-height: 1.4; }
        .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img .icon-play-vdo {
          margin: 10px auto 30px;
          -webkit-transition: all .2s ease-in-out;
          -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #fff; }
          .box-intro .intro-content-right .content-card-wrapper .news-card-img-video .txt-over-img .icon-play-vdo i {
            font-size: 24px;
            color: #488bf8;
            line-height: 50px;
            padding-left: 8px; }
  .box-intro .intro-content-right .button-card-main {
    background-color: #fff;
    padding: 4px 10px;
    font-size: 0.7em;
    border: 1px solid;
    position: relative;
    border-radius: 3px;
    z-index: 7;
    cursor: pointer; }
    .box-intro .intro-content-right .button-card-main.button-blue {
      color: #488bf8;
      border-color: #488bf8; display:none; }
    .box-intro .intro-content-right .button-card-main.button-ocean {
      color: #eaf5fb;
      border-color: #eaf5fb; }
    .box-intro .intro-content-right .button-card-main.button-pink {
      color: #ff567d;
      border-color: #ff567d;
      background-color: #fafafa; display:none; }
  .box-intro .intro-content-right .content-news-bottom {
    position: relative; }
    .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide {
      background: rgba(255, 255, 255, 0.5);
      text-align: center;
      margin: 1%;
      padding: 0 0 3% 0;
      -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide {
        width: 98%;
        padding-bottom: 0 !important; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img {
          height: 100% !important; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img img {
            top: 0 !important; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img:before {
            position: initial;
            opacity: 0;
            z-index: 0; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img {
            position: absolute;
            z-index: 3;
            top: 5%;
            padding-left: 10%;
            text-align: left;
            width: 70%;
            color: #fff; }
            .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img p {
              margin: 0;
              text-shadow: 2px 2px 10px rgba(150, 150, 150, 0.8);
              line-height: 1.6; }
            .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .card-slide-img .text-over-img h1 {
              font-size: 1.2em;
              line-height: 1.3;
              text-shadow: 2px 2px 10px rgba(150, 150, 150, 0.8); }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .slick-slide {
          margin: 0 !important; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide.wrapper-banner-slide .slick-dotted.slick-slider {
          margin-bottom: 0; }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .title-promotion-slide {
        color: #000;
        padding: 15px 0 10px 0; }
      .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner {
        opacity: 0;
        -webkit-animation-name: v;
        animation-name: v;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide a {
          display: table;
          height: 30vh; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-arrow {
          display: block;
          z-index: 1;
          background: rgba(255, 255, 255, 0.8);
          height: 97%; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-prev {
          left: 0;
          padding: 0 35px 0 9px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-prev:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f104";
            color: #4b4f56;
            line-height: 30px;
			margin-left: -2px;
            -webkit-text-stroke: 1px white; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-next {
          right: 0;
          padding: 0 30px 0 13px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .news-slide .slick-next:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f105";
            color: #4b4f56;
            line-height: 30px;
			margin-left: -2px;
            -webkit-text-stroke: 1px white; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .wrapper-slide {
          display: table;
          height: 30vh; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-arrow {
          display: none; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev {
          left: 0; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev:before {
            content: " "; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next {
          right: 0; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next:before {
            content: " "; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots {
          bottom: 15px;
          padding-left: 30px;
          text-align: left; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li:hover {
            color: #fff; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li button:before {
            opacity: .5; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li.slick-active button:before, .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-dots li.slick-active button:hover {
            opacity: 1;
            color: #fff; }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-text {
      background: #fff;
      position: relative;
      display: table-cell;
      vertical-align: top;
      -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-text:hover .card-slide-img:before {
        opacity: 1; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img {
        width: 100%;
        text-align: center;
        overflow: hidden;
        height: 50%;
        position: relative; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.3);
          opacity: 0.7;
          -webkit-transition: opacity .2s ease-in-out;
          -o-transition: opacity .2s ease-in-out;
          transition: opacity .2s ease-in-out;
          z-index: 5; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img img {
          top: -15%;
          position: relative;
          width: 100%; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-img h2 {
          position: absolute;
          z-index: 6;
          top: 30%;
          width: 100%;
          color: #fff; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text {
        padding: 10px 0 0 0; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text p {
          font-size: 0.7em;
          text-align: center;
          line-height: 1.3;
          min-height: 35px;
          color: #686868;
          padding: 5px 15px 5px 15px;
          margin: 0; }
        .box-intro .intro-content-right .content-news-bottom .card-slide-img-text .card-slide-text .txt-red {
          font-size: 0.7em;
          text-align: center;
          color: #e12d2d;
          position: absolute;
          bottom: 7%;
          width: 100%; }
    .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus {
      background: #fff;
      position: relative;
      display: table-cell;
      vertical-align: middle;
      -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        -webkit-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        z-index: 5; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus:hover:before {
        opacity: 1; }
      .box-intro .intro-content-right .content-news-bottom .card-slide-img-focus .card-slide-img {
        width: 75%;
        margin: 0 auto; }
    .box-intro .intro-content-right .content-news-bottom .slick-slide {
      margin: 5px 7px 5px 7px;
      -webkit-animation-name: v;
      animation-name: v;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out; }
    .box-intro .intro-content-right .content-news-bottom .slick-slide {
      -webkit-transition: all ease-in-out .3s;
      -o-transition: all ease-in-out .3s;
      transition: all ease-in-out .3s; }
    .box-intro .intro-content-right .content-news-bottom .slick-active {
      opacity: .5; }
    .box-intro .intro-content-right .content-news-bottom .slick-current {
      opacity: 1; }
    .box-intro .intro-content-right .content-news-bottom .flip-card {
      width: 100%;
      height: 100%;
      position: relative;
      cursor: pointer;
      -webkit-transition: -webkit-transform 1s;
      -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
      transition: -webkit-transform 1s;
      -o-transition: transform 1s;
      transition: transform 1s;
      transition: transform 1s, -webkit-transform 1s;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: 50% 50%; }
    .box-intro .intro-content-right .content-news-bottom .flip-card .flip-card-inner {
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 10;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden; }
    .box-intro .intro-content-right .content-news-bottom .flip-card .front-card {
      background: #fff; }
    .box-intro .intro-content-right .content-news-bottom .flip-card .back-card {
      background: #fff;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }
      .box-intro .intro-content-right .content-news-bottom .flip-card .back-card .msg-top {
        top: 10%;
        left: 5%;
        position: absolute;
        display: block;
        width: 90%;
        font-size: 1em;
        text-align: center;
        border: 2px dashed #f57070;
        color: #f57070; 
		 font-family: 'dtac2013_bl-webfont', 'dtac2013_lt-webfont', 'dtac2013_rg-webfont';}
      .box-intro .intro-content-right .content-news-bottom .flip-card .back-card .msg-bottom {
        bottom: 15%;
        position: absolute;
        display: block;
        width: 100%;
        padding: 1% 3%;
        font-size: 0.6em;
        color: #222;
        line-height: 1.3; }
    .box-intro .intro-content-right .content-news-bottom .flip-card.flipped {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }
	  
.box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-arrow {
          display: block;
          z-index: 1; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev {
          left: 0;
          padding: 0 35px 0 10px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-prev:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f104";
            color: #4b4f56;
            line-height: 30px;
            -webkit-text-stroke: 1px white; }
        .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next {
          right: 0;
          padding: 0 50px 0 15px; }
          .box-intro .intro-content-right .content-news-bottom .wrapper-promotion-slide .wrapper-promotion-inner .banner-slide .slick-next:before {
            font-family: FontAwesome;
            font-size: 80px;
            content: "\f105";
            color: #4b4f56;
            line-height: 30px;
			margin-left: -2px;
            -webkit-text-stroke: 1px white; }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}
